<script setup lang="ts">
import { ref, reactive } from "vue";
import navbar from "@/components/navbar/navbar.vue";
import cardBox from "./components/cardList.vue";
import cardBoxs from "./components/card.vue";
import { selltList, shopList, authenticationList } from "@/apis/market";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import noneBox from "@/components/noneBox/noneBox.vue";

const navbarFixed = ref(false);
let title = ref("榜"); //销售榜 店铺榜
let state = reactive({
  collectList: [],
  pageSize: 10, //条数
  pageNum: 1, //页数
  isMore: false,
});

// 获取销售榜
const getSelltList = async () => {
  let params = {
    pageSize: state.pageSize,
    pageNum: state.pageNum,
  };
  let { rows, code } = await selltList(params);
  if (code == "200") {
    // state.collectList = rows
    if (rows.length <= 0) {
      state.isMore = true;
      return false;
    }
    state.pageNum++;
    for (let i = 0; i < rows.length; i++) {
      state.collectList.push(rows[i]);
    }
  }
  //console.log("获取销售榜", state.collectList, code);
};

// 获取认证榜
const getAuthenticationList = async () => {
  let params = {
    pageSize: state.pageSize,
    pageNum: state.pageNum,
  };
  let { rows, code } = await authenticationList(params);
  if (code == "200") {
    // state.collectList = rows
    if (rows.length <= 0) {
      state.isMore = true;
      return false;
    }
    state.pageNum++;
    for (let i = 0; i < rows.length; i++) {
      state.collectList.push(rows[i]);
    }
  }
  //console.log("获取平台榜", state.collectList, code);
};

// 获取店铺榜
const getShopList = async () => {
  let params = {
    pageSize: state.pageSize,
    pageNum: state.pageNum,
  };
  let { rows, code } = await shopList(params);
  if (code == "200") {
    // state.collectList = rows
    if (rows.length <= 0) {
      state.isMore = true;
      return false;
    }
    state.pageNum++;
    for (let i = 0; i < rows.length; i++) {
      state.collectList.push(rows[i]);
    }
  }
  //console.log("获取店铺榜", state.collectList, code);
};
onLoad((options: any) => {
  // 标题
  title.value = options.title;
  //console.log("title.value: ", title.value);
  state.collectList = [];
  state.pageNum = 1;
  state.isMore = false;
  state.pageSize = 10;
  if (title.value == "销售榜") {
    // 获取销售榜
    getSelltList();
  } else if (title.value == "认证榜") {
    getAuthenticationList();
  } else {
    // 获取店铺榜
    getShopList();
  }
});

const cardClick = (id: any) => {
  //console.log(id, "-----");
  // uni.navigateTo({
  //   url: `/pagesMerchand/store?&shopId=${id}`,
  // });
  uni.navigateTo({
    url: `/pagesMerchand/stone-details?&id=${id}&title=${title.value}`,
  })
};
const cardClicks = (id: any) => {
  uni.navigateTo({
    url: `/pagesMerchand/store?&shopId=${id}`,
  });
};
onReachBottom((e: any) => {
  //console.log(e, "----触底了----");
  if (title.value == "销售榜") {
    // 获取销售榜
    getSelltList();
  } else if (title.value == "认证榜") {
    getAuthenticationList();
  } else {
    // 获取店铺榜
    getShopList();
  }
});
</script>

<template>
  <navbar :fixed="navbarFixed" :back="true" :title="title" />
  <view class="main-box" v-if="state.collectList.length > 0">
    <!-- <view class="title-text">平台销售榜</view> -->
    <view class="title-text">平台{{ title }}</view>
    <view class="" v-if="title === '认证榜'">
      <view v-for="(item, index) in state.collectList" :key="index">
        <cardBox :cardItem="item" :cardIndex="index" :title="title" @tap="cardClick(item.id)"></cardBox>
      </view>
      <!-- <image src="" mode="scaleToFill" /> -->
      <!-- v-if="state.isMore" -->
      <uv-load-more status="nomore" fontSize="12px" nomoreText="我也是有底线的~" :line="true" />
    </view>
    <view v-else>
      <view v-for="(item, index) in state.collectList" :key="index">
        <cardBoxs :cardItem="item" :cardIndex="index" :title="title" @tap="cardClicks(item.id)"></cardBoxs>
      </view>
      <!-- <image src="" mode="scaleToFill" /> -->
      <!-- v-if="state.isMore" -->
      <uv-load-more status="nomore" fontSize="12px" nomoreText="我也是有底线的~" :line="true" />
    </view>
  </view>
  <noneBox v-if="state.collectList.length <= 0"></noneBox>
</template>

<style lang="scss">
//
.main-box {
  position: relative;
  z-index: 2;
  padding: 50rpx 30rpx;
  box-sizing: border-box;
  background: url("https://www.stoneplayer.com/background/underlay.jpg") no-repeat;
  background-size: 100% 620rpx;
}

.title-text {
  margin-bottom: 20rpx;
  color: rgba(255, 255, 255, 1);
  font-size: 56rpx;
}
</style>
